<template>
  <div class="provincesales-wrapper">
      <div class="filter-wrapper">
          <BaseFilter :config="getCityOptions()" @mychange="(values) => setFilterData('city', values)" />
      </div>
      <div class="filter-wrapper">
          <BaseFilter :config="dateOptions" @mychange="(values) => setFilterData('date', values)" />
      </div>
      <div class="table-wrapper">
          <BaseTable :columns="tableColumns" :tableData="getTableData() || []" />
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import { cityOptionsData } from "../../config/city";
import BaseTable from "@/components/BaseTable.vue";
import { getCityactivity } from "@/api/data";
export default {
    name: "provincesales",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            cityOptions: [
                {
                    label: "选择省份",
                    key: "province",
                    type: "select",
                    props: {
                        placeholder: "选择省份"
                    },
                    options: cityOptionsData
                },
                {
                    label: "选择市",
                    key: "city",
                    type: "select",
                    props: {
                        placeholder: "选择市"
                    },
                    options: []
                },
            ],
            dateOptions: [
                {
                    label: "按年",
                    key: "year",
                    type: "datepicker",
                    props: {
                        type: "year",
                        placeholder: "选择年份"
                    },
                },
                {
                    label: "按月",
                    key: "month",
                    type: "datepicker",
                    props: {
                        type: "month",
                        placeholder: "选择年份"
                    },
                }
            ],
            filterData: {},
            tableColumns: [
                {
                    title: "省",
                    key: "province",
                },
                {
                    title: "市",
                    key: "city",
                },
                {
                    title: "活跃度",
                    key: "active_value",
                    props: {
                        sortable: true
                    }
                }
            ],
            tableData: []
        }
    },
    mounted(){
        getCityactivity().then(res => {
            if(res.code === 200){
                this.tableData = res?.resolut || []
                return
            }
            this.$message.error("加载数据失败")
        }).catch(err => {
            this.$message.error("加载数据失败")
        })
    },
    methods: {
        setFilterData(key, values){
            this.filterData = {
                ...this.filterData,
                [key]: values
            };
        },
        getCityOptions(){
            const { province } = this.filterData?.city || {};
            let cityList = [];
            return this.cityOptions.map(item => {
                switch(item.key){
                    case "city":
                        cityList = (province ? cityOptionsData.find(item => item.value === province)?.children : []) || [];
                        return {
                            ...item,
                            options: cityList,
                            props: {
                                ...item.props,
                                disabled: cityList.length === 0
                            }
                        }
                    default:
                        return item;
                }
            })
        },
        getTableData(){
            const { province, city } = this.filterData.city || {};
            let tableData = this.tableData;
            if(province){
                tableData = tableData.filter(item => !province || item.province?.includes(province));
            }
            if(city){
                tableData = tableData.filter(item => !city || item.city?.includes(city))
            }
            return tableData;
        }
    },
}
</script>

<style lang="scss">
.provincesales-wrapper {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .date-picker {
        label {
            display: inline-block;
            width: 100px;
            &::after {
                content: ":";
                margin-left: 3px;
            }
        }
    }
    .filter-wrapper {
        margin-top: 20px;
        display: flex;
    }
    .table-wrapper {
        margin-top: 20px;
    }
}
</style>